<template>
  <bsCard v-loading="loading" class="fundDistribution-wrapper" :width="getBsLRWPercent(745)" :height="`${cardHeight}px`">
    <div class="bs-card-title">企业注册资本分布</div>
    <app-echarts :height="`${cardHeight - cardTitleHeight - 20}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getRegisteredCapital } from '@/api/bigscreen'
import { colors } from '../components/tools'

export default {
  name: 'fundDistribution',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      echartsOption: {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: []
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel:{
              // rotate: 15
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位:家',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getRegisteredCapital()
        if (res.resultCode === 200) {
          this.renderData(res.resultData || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderData(data) {
      const regpMap = {}
      const indusMap = {}
      for (let perdata of data) {
        let curIndusSeriesData = {
          value: perdata.regcap,
          name: perdata.regpName
        }
        if (indusMap[perdata.indusCode]) {
          indusMap[perdata.indusCode].data.push(curIndusSeriesData)
        } else {
          indusMap[perdata.indusCode] = {
            indusName: perdata.indusName,
            data: [curIndusSeriesData]
          }
        }

        if (regpMap[perdata.regpCode]) {
          //
        } else {
          regpMap[perdata.regpCode] = perdata.regpName
        }
      }

      let indusKeys = Object.keys(indusMap)
      // legend
      // this.echartsOption.legend.data = indusKeys.map(
      //   (key) => indusMap[key].indusName
      // )
      // xAxis
      this.echartsOption.xAxis[0].data = Object.values(regpMap)
      // series
      this.echartsOption.series = indusKeys.map((key) => {
        return {
          name: indusMap[key].indusName,
          type: 'bar',
          stack: 'stack',
          emphasis: {
            focus: 'series'
          },
          data: indusMap[key].data
        }
      })

    }
  }
}
</script>

<style lang='scss'>
.fundDistribution-wrapper {
}
</style>

